<div class="form-horizontal">

    <!--Input - Number -->
    <fieldset>
        <div class="form-group row">
            <label class="col-xl-4 col-form-label" placement="top" [tooltip]="'client.details.identityTokenLifetime-tooltip' | translate">{{
                'client.details.identityTokenLifetime' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <input class="form-control" autocomplete="client-identityTokenLifetime" [placeholder]="'client.details.identityTokenLifetime-tooltip' | translate" [(ngModel)]="model.identityTokenLifetime" numbersOnly />
            </div>
        </div>
    </fieldset>
    <!--Input - Number -->
    <fieldset>
        <div class="form-group row">
            <label class="col-xl-4 col-form-label" placement="top" [tooltip]="'client.details.accessTokenLifetime-tooltip' | translate">{{
                'client.details.accessTokenLifetime' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <input class="form-control" autocomplete="client-accessTokenLifetime" [placeholder]="'client.details.accessTokenLifetime-tooltip' | translate" [(ngModel)]="model.accessTokenLifetime" numbersOnly />
            </div>
        </div>
    </fieldset>
    <!--Select-->
    <fieldset>
        <div class="form-group row">
            <label class="col-xl-4 col-form-label" placement="top" [tooltip]="'client.details.accessTokenTypes-tooltip' | translate">{{
                'client.details.accessTokenTypes' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <ng-select [items]="accessTokenTypes" [(ngModel)]="model.accessTokenType" bindValue="id" bindLabel="text" [placeholder]="'client.details.accessTokenTypes' | translate"></ng-select>
            </div>
        </div>
    </fieldset>
    <!--Input - Number -->
    <fieldset>
        <div class="form-group row">
            <label class="col-xl-4 col-form-label" placement="top" [tooltip]="'client.details.authorizationCodeLifetime-tooltip' | translate">{{
                'client.details.authorizationCodeLifetime' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <input class="form-control" autocomplete="client-authorizationCodeLifetime" [placeholder]="'client.details.authorizationCodeLifetime-tooltip' | translate" [(ngModel)]="model.authorizationCodeLifetime" numbersOnly />
            </div>
        </div>
    </fieldset>
    <!--Input - Number -->
    <fieldset>
        <div class="form-group row">
            <label class="col-xl-4 col-form-label" placement="top" [tooltip]="'client.details.absoluteRefreshTokenLifetime-tooltip' | translate">{{
                'client.details.absoluteRefreshTokenLifetime' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <input class="form-control" autocomplete="client-absoluteRefreshTokenLifetime" [placeholder]="'client.details.absoluteRefreshTokenLifetime-tooltip' | translate" [(ngModel)]="model.absoluteRefreshTokenLifetime" numbersOnly />
            </div>
        </div>
    </fieldset>
    <!--Input - Number -->
    <fieldset>
        <div class="form-group row">
            <label class="col-xl-4 col-form-label" placement="top" [tooltip]="'client.details.slidingRefreshTokenLifetime-tooltip' | translate">{{
                'client.details.slidingRefreshTokenLifetime' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <input class="form-control" autocomplete="client-slidingRefreshTokenLifetime" [placeholder]="'client.details.slidingRefreshTokenLifetime-tooltip' | translate" [(ngModel)]="model.slidingRefreshTokenLifetime" numbersOnly />
            </div>
        </div>
    </fieldset>
    <!--Select-->
    <fieldset>
        <div class="form-group row">
            <label class="col-xl-4 col-form-label" placement="top" [tooltip]="'client.details.refreshTokenUsage-tooltip' | translate">{{
                'client.details.refreshTokenUsage' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <ng-select [items]="refreshTokenUsages" [(ngModel)]="model.refreshTokenUsage" bindValue="id" bindLabel="text" [placeholder]="'client.details.refreshTokenUsage-tooltip' | translate"></ng-select>
            </div>
        </div>
    </fieldset>
    <!--Select-->
    <fieldset>
        <div class="form-group row">
            <div class="col-xl-4">
                <label class="col-form-label">{{ 'client.details.refreshTokenExpiration' | translate }} </label>&nbsp;
                <button type="button" class="btn btn-xs btn-info" [popover]="'client.details.refreshTokenExpiration-tooltip' | translate" [popoverTitle]="'client.details.refreshTokenExpiration' | translate" placement="top" container="body" [adaptivePosition]="false">
                    <i class="fa fa-comment-dots"></i>
                </button>
            </div>
            <div class="col-xl-8">
                <ng-select [items]="tokenExpirations" [(ngModel)]="model.refreshTokenExpiration" bindValue="id" bindLabel="text" [placeholder]="'client.details.refreshTokenExpiration-tooltip' | translate"></ng-select>
            </div>
        </div>
    </fieldset>

    <!--Checkbox-->
    <fieldset>
        <div class="form-group row">
            <label class="col-xl-4 col-form-label" placement="top" [tooltip]="'client.details.updateAccessTokenClaimsOnRefresh-tooltip' | translate">{{
                'client.details.updateAccessTokenClaimsOnRefresh' | translate }}
                <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <label class="switch m-0">
                    <input type="checkbox" [(ngModel)]="model.updateAccessTokenClaimsOnRefresh" />
                    <span></span>
                </label>
            </div>
        </div>
    </fieldset>
    <!--Checkbox-->
    <fieldset>
        <div class="form-group row">
            <label class="col-xl-4 col-form-label" placement="top" [tooltip]="'client.details.includeJwtId-tooltip' | translate">{{
                'client.details.includeJwtId' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <label class="switch m-0">
                    <input type="checkbox" [(ngModel)]="model.includeJwtId" />
                    <span></span>
                </label>
            </div>
        </div>
    </fieldset>
    <!--Checkbox-->
    <fieldset>
        <div class="form-group row">
            <label class="col-xl-4 col-form-label" placement="top" [tooltip]="'client.details.alwaysSendClientClaims-tooltip' | translate">{{
                'client.details.alwaysSendClientClaims' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <label class="switch m-0">
                    <input type="checkbox" [(ngModel)]="model.alwaysSendClientClaims" />
                    <span></span>
                </label>
            </div>
        </div>
    </fieldset>
    <!--Checkbox-->
    <fieldset>
        <div class="form-group row">
            <div class="col-xl-4">
                <label class="col-form-label">{{ 'client.details.alwaysIncludeUserClaimsInIdToken' | translate }}
                </label>&nbsp;
                <button type="button" class="btn btn-xs btn-info" [popover]="'client.details.alwaysIncludeUserClaimsInIdToken-tooltip' | translate" [popoverTitle]="'client.details.alwaysIncludeUserClaimsInIdToken' | translate" placement="top" container="body" [adaptivePosition]="false">
                    <i class="fa fa-comment-dots"></i>
                </button>
            </div>
            <div class="col-xl-8">
                <label class="switch m-0">
                    <input type="checkbox" [(ngModel)]="model.alwaysIncludeUserClaimsInIdToken" />
                    <span></span>
                </label>
            </div>
        </div>
    </fieldset>
    <!--Input - text -->
    <fieldset>
        <div class="form-group row">
            <label class="col-xl-4 col-form-label" placement="top" [tooltip]="'client.details.pairWiseSubjectSalt-tooltip' | translate">{{
                'client.details.pairWiseSubjectSalt' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <input class="form-control" autocomplete="client-pairWiseSubjectSalt" [placeholder]="'client.details.pairWiseSubjectSalt-tooltip' | translate" [(ngModel)]="model.pairWiseSubjectSalt" />
            </div>
        </div>
    </fieldset>
    <!--Input - text -->
    <fieldset>
        <div class="form-group row">
            <label class="col-xl-4 col-form-label" placement="top" [tooltip]="'client.details.clientClaimsPrefix-tooltip' | translate">{{
                'client.details.clientClaimsPrefix' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <input class="form-control" autocomplete="client-clientClaimsPrefix" [placeholder]="'client.details.clientClaimsPrefix-tooltip' | translate" [(ngModel)]="model.clientClaimsPrefix" />
            </div>
        </div>
    </fieldset>
    <!--Button-->
    <fieldset>
        <div class="form-group row">
            <label placement="top" [tooltip]="'client.details.claims-tooltip' | translate" class="col-xl-4 col-form-label">{{
                'client.details.claims' | translate }} <i class="fa fa-comment-dots"></i></label>
            <div class="col-xl-8">
                <a [routerLink]="['/clients', model.clientId, 'claims']" class="btn btn-primary">{{
                    'client.details.claims' | translate }}</a>
            </div>
        </div>
    </fieldset>
</div>